<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>收入 / 提现 明细</span>
</div>

	<el-row>

	<el-form :inline="true" :model="form" >
		<el-form-item >
			<daterange v-bind:se.sync="s_e" type="daterange"></daterange>
	    </el-form-item>
	   
		<el-form-item >
		    <el-input v-model="form.code" placeholder="订单编号"></el-input>
		</el-form-item>

		<el-form-item >
		    <el-input v-model="form.nickname" placeholder="游客昵称"></el-input>
		</el-form-item>
		
		<el-form-item >
		    <el-select v-model="form.type"  placeholder="业务类型">
		      <el-option 
		      v-for="item in typearr"
		      :label="item.label" :value="item.value"></el-option>
		    </el-select>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		</el-form-item>

    </el-form>
    </el-row>

  	<el-row>
	<el-table
    :data="memberIncomeDetailsList.results"
    border
    v-loading="loading"
    style="width: 100%" >
	    <el-table-column
	      label="时间"
	      prop="create_time"
	      width="180">
	    </el-table-column>

	    <el-table-column
	      label="头像"
	      width="70">
	       	<template slot-scope="scope">
	        	<img :src="scope.row.headimgurl" width="30" height="30">
	      	</template>
	    </el-table-column>

	    <el-table-column
	      label="昵称"
	      prop="nickname"
	      width="200">
	    </el-table-column>

	    <!-- <el-table-column
	      label="业务类型"
	      width="80">
	       	<template slot-scope="scope">
	       		{{type_label[parseInt(scope.row.type)]}}
	      	</template>
	    </el-table-column> -->

	    <el-table-column
	      label="金额"
	      prop="amount"
	      width="80">
	    </el-table-column>

	    <el-table-column
	      label="订单"
	      prop="code"
	      >
	    </el-table-column>

	    <!-- <el-table-column
	      fixed="right"
	      label="操作"
	      >
	      <template slot-scope="scope">
	        <el-button type="text" size="small">详情</el-button>
	      </template>
	    </el-table-column> -->
	</el-table>
	</el-row>	


	<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="memberIncomeDetailsList.totalRecord">
    </el-pagination>
    </el-row>

</el-card>
</div>		
</template>

<script>

import { mapGetters } from 'vuex'
import { date2str } from '../../config/util'
import daterange from '../../components/daterange'

export default {
	name: 'incomedetails',
		data () {
		return {
		  	typearr : [
				// {'label' : '全部', 'value' : ''},
				{'label' : '收入', 'value' : '1'},
				{'label' : '提现', 'value' : '2'},
			],

			type_label : ['', '收入', '提现'],

			form : {
				'nickname' : '',
				'code' : '',
				'type' : '1',
			},

			pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			s_e : [date2str(new Date()), date2str(new Date())],

			loading : true,
		}
	},

	props: {

	},

	components: {
		daterange,
	},

	computed : {
		...mapGetters([
			'memberIncomeDetailsList',
		]),
	},

	methods : {

		onSubmit () {
			this.getMemberIncomeDetailsList();
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.getMemberIncomeDetailsList();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.getMemberIncomeDetailsList();
		},

		getMemberIncomeDetailsList () {
			console.log(this.s_e);

			var para = {
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				code : this.form.code,
				nickname : this.form.nickname,
				type : this.form.type,
				start_time : this.s_e[0] + ' 00:00:00',
				end_time : this.s_e[1] + ' 23:59:59',
				cb : (data) => {
					this.loading = false;
				},
				err : res => {
					this.loading = false;
					this.$notify.error({
			          title: '错误',
			          message: res,
			        });
				}
			};

			this.loading = true;

			this.$store.dispatch('getMemberIncomeDetailsList', para);
		}
	},

	watch : {
	    
	},

	mounted () {
		
		this.getMemberIncomeDetailsList();
	},

}
</script>

<style scoped>

</style>
